@@include('./_header.html', {
  "title": "按钮组件"
})

<!-- 组件区域 start -->
<div class="widget-stage">
	<div class="widget-stage-title">TomUI Button组件</div>
    <div class="widget-item">
        <div class="widget-item-title">基础按钮</div>
        <div class="widget-item-cnt">
            <a class="btn btn-default" href="javascript:;">Default</a>
            <a class="tm-btn tm-btn-ghost" href="javascript:;">Ghost</a>
            <a class="tm-btn tm-btn-dashed" href="javascript:;">Dashed</a>
            <a class="tm-btn tm-btn-text" href="javascript:;">Text</a>
            <button class="tm-btn tm-btn-circle" type="button">常规按钮</button>
        </div>
    </div>
	<div class="widget-item">
		<div class="widget-item-title">基础按钮</div>
		<div class="widget-item-cnt">
			<a class="tm-btn" href="javascript:;">Default</a>
			<a class="tm-btn tm-btn-ghost" href="javascript:;">Ghost</a>
			<a class="tm-btn tm-btn-dashed" href="javascript:;">Dashed</a>
			<a class="tm-btn tm-btn-text" href="javascript:;">Text</a>
			<button class="tm-btn tm-btn-circle" type="button">常规按钮</button>
		</div>
	</div>
	<div class="widget-item">
		<div class="widget-item-title">禁止状态按钮</div>
		<div class="widget-item-cnt">
			<a href="javascript:;" class="tm-btn disabled">禁止按钮</a>
			<button type="button" class="tm-btn" disabled="disabled">常规按钮</button>
			<input type="button" class="tm-btn" value="常规按钮" disabled="disabled" />
			<a href="javascript:;" class="tm-btn tm-btn-primary" disabled="disabled">禁止按钮</a>
			<button type="button" class="tm-btn tm-btn-primary" disabled="disabled">常规按钮</button>
			<input type="button" class="tm-btn tm-btn-primary" value="常规按钮" disabled="disabled" />
		</div>
	</div>
	<div class="widget-item">
		<div class="widget-item-title">有颜色倾向按钮</div>
		<div class="widget-item-cnt">
			<div>
				<a class="tm-btn tm-btn-ghost tm-btn-primary" href="javascript:;">主要按钮</a>
				<a class="tm-btn tm-btn-ghost tm-btn-info" href="javascript:;">信息按钮</a>
				<a class="tm-btn tm-btn-ghost tm-btn-success" href="javascript:;">成功按钮</a>
				<a class="tm-btn tm-btn-ghost tm-btn-warning" href="javascript:;">警告按钮</a>
				<a class="tm-btn tm-btn-ghost tm-btn-error" href="javascript:;">错误按钮</a>
				<a class="tm-btn tm-btn-ghost tm-btn-danger" href="javascript:;">危险按钮</a>
			</div>
			<br />
			<div>
				<a class="tm-btn tm-btn-dashed tm-btn-primary" href="javascript:;">主要按钮</a>
				<a class="tm-btn tm-btn-dashed tm-btn-info" href="javascript:;">信息按钮</a>
				<a class="tm-btn tm-btn-dashed tm-btn-success" href="javascript:;">成功按钮</a>
				<a class="tm-btn tm-btn-dashed tm-btn-warning" href="javascript:;">警告按钮</a>
				<a class="tm-btn tm-btn-dashed tm-btn-error" href="javascript:;">错误按钮</a>
				<a class="tm-btn tm-btn-dashed tm-btn-danger" href="javascript:;">危险按钮</a>
			</div>
			<br />
			<div>
				<a class="tm-btn tm-btn-primary" href="javascript:;">主要按钮</a>
				<a class="tm-btn tm-btn-info" href="javascript:;">信息按钮</a>
				<a class="tm-btn tm-btn-success" href="javascript:;">成功按钮</a>
				<a class="tm-btn tm-btn-warning" href="javascript:;">警告按钮</a>
				<a class="tm-btn tm-btn-error" href="javascript:;">错误按钮</a>
				<a class="tm-btn tm-btn-danger" href="javascript:;">危险按钮</a>
			</div>
		</div>
	</div>
	<div class="widget-item">
		<div class="widget-item-title">不同尺寸按钮</div>
		<div class="widget-item-cnt">
			<button type="button" class="tm-btn-primary tm-btn tm-btn-large">大型按钮</button>
			<button type="button" class="tm-btn-primary tm-btn">正常按钮</button>
			<button type="button" class="tm-btn-primary tm-btn tm-btn-small">小型按钮</button>
			<button type="button" class="tm-btn-primary tm-btn tm-btn-mini">迷你按钮</button>
		</div>
		<br />
		<div class="widget-item-cnt">
			<button type="button" class="tm-btn-primary tm-btn-circle tm-btn tm-btn-large">大型按钮</button>
			<button type="button" class="tm-btn-primary tm-btn-circle tm-btn">正常按钮</button>
			<button type="button" class="tm-btn-primary tm-btn-circle tm-btn tm-btn-small">小型按钮</button>
			<button type="button" class="tm-btn-primary tm-btn-circle tm-btn tm-btn-mini">迷你按钮</button>
		</div>
	</div>
	<div class="widget-item">
		<div class="widget-item-title">图标按钮</div>
		<div class="widget-item-cnt">
			<button type="button" class="tm-btn-primary tm-btn">
				<i class="tm-icon tm-checkmark-round"></i>
				<span>正常按钮</span>
			</button>
			<button type="button" class="tm-btn tm-btn-primary tm-btn-loading">
				<i class="tm-icon tm-load-c tm-load-loop"></i>
				&nbsp;Loading...
			</button>
			<button type="button" class="tm-btn-primary tm-btn tm-btn-large">
				<i class="tm-icon tm-checkmark-round"></i>
				<span>正常按钮</span>
			</button>
		</div>
	</div>
	<div class="widget-item">
		<div class="widget-item-title">长按钮</div>
		<div class="widget-item-cnt">
			<button type="button" class="tm-btn-primary tm-btn tm-btn-large tm-btn-long">大型按钮</button>
			<br />
			<br />
			<button type="button" class="tm-btn-primary tm-btn tm-btn-long">正常按钮</button>
			<br />
			<br />
			<button type="button" class="tm-btn-primary tm-btn tm-btn-small tm-btn-danger tm-btn-long">正常按钮</button>
		</div>
	</div>
</div>
<!-- 组件区域 end -->

@@include('./_footer.html')